{% extends "_layouts/examples.html" %}
{% block title %}Grid / Full{% endblock %}

{% block standalone_css %}patterns_grid-8{% endblock %}

{% block content %}
<div class="grid-demo">
  <section>
    <div class="grid-row">
      <div class="grid-col-8">
        <span>.grid-col-8</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-7">
        <span>.grid-col-7</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-6">
        <span>.grid-col-6</span>
      </div>
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-5">
        <span>.grid-col-5</span>
      </div>
      <div class="grid-col-3">
        <span>.grid-col-3</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-4">
        <span>.grid-col-4</span>
      </div>
      <div class="grid-col-4">
        <span>.grid-col-4</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-3">
        <span>.grid-col-3</span>
      </div>
      <div class="grid-col-5">
        <span>.grid-col-5</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
      <div class="grid-col-6">
        <span>.grid-col-6</span>
      </div>
    </div>
    <div class="grid-row">
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-7">
        <span>.grid-col-7</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
      <div class="grid-col-1">
        <span>.grid-col-1</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
      <div class="grid-col-6">
        <span>.grid-col-6</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-6">
        <span>.grid-col-6</span>
      </div>
      <div class="grid-col-2">
        <span>.grid-col-2</span>
      </div>
    </div>
  </section>

  <section>
    <div class="grid-row">
      <div class="grid-col-4">
        <span>.grid-col-4</span>
      </div>
      <div class="grid-col-4">
        <span>.grid-col-4</span>
      </div>
    </div>
  </section>
</div>
{% endblock %}
